<template>
  <div class="w-[250px] h-screen bg-gray-800 text-white flex flex-col p-4 shadow-lg">
    <h2 class="text-xl font-bold mb-4">前端示例 Demo</h2>
    <ul>
      <li
        v-for="(item, index) in menuItems"
        :key="item.value"
        @click="updateValue(item.value, index)"
        class="p-3 cursor-pointer hover:bg-gray-700 rounded transition-all"
        :class="{ 'bg-gray-600': model === index }"
      >
        {{ item.label }}
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const model = defineModel({ default: 0 });
const emit = defineEmits(["update:modelValue"]);
const menuItems = ref([
  { label: "示例 1", value: "demo1" },
  { label: "示例 2", value: "demo2" },
  { label: "示例 3", value: "demo3" },
]);

const updateValue = (value: string, index: number) => {
  console.log("当前选中:", value);
  console.log("model", model.value);
  model.value = index;
};
</script>

<style>
/* UnoCSS classes are used directly */
</style>
